<template>
    <div class="goods">
        <div class="header">
            <div class="left">
                <div class="checkAllBox" @click="checkAllGood">
                    {{ischeckAll?'√':'O'}}
                    <p>全选</p>
                </div>
            </div>
            <div class="right">
                <button class="delete btn"
                @click="bindClickDelGood">
                    删除
                </button>
                <button class="add btn" 
                @click="bindClickAddGood">
                    添加
                </button>
            </div>
        </div>
        <div class="body">
            <table class="goodsList">
                <tr>
                    <th>选择</th>
                    <th v-for="item in goodsListHead" :key="item">
                        {{item}}
                    </th>
                </tr>
                <tr
                v-for="item in goodsList"
                :key="item"
                :data-gid="item.gid"
                @click="selectGood"
                :class="{checked:item.ischeck}"
                >
                    <td>
                        {{item.ischeck?'√':'O'}}
                    </td>
                    <td>
                        <p>{{item.gid}}</p>
                    </td>
                    <td>
                        <p>{{item.gtype}}</p>
                    </td>
                    <td>
                        <p>{{item.name}}</p>
                    </td>
                    <td>
                        <p>{{item.type}}</p>
                    </td>
                    <td>
                        <p>{{item.specifications}}</p>
                    </td>
                    <td>
                        <p>{{item.price}}</p>
                    </td>
                    <td>
                        <p>{{item.acttime}}</p>
                    </td>
                    <td>
                        <p>{{item.author}}</p>
                    </td>
                    <td>
                        <img :src="item.smallPicUrl" alt="商品图">
                    </td>
                    <td>
                        <p>{{item.description}}</p>
                    </td>
                    <td>
                        <p>{{item.longPicUrl}}</p>
                    </td>
                </tr>
            </table>
        </div>
        <div class="addPlane" v-if="isShowingAdd">
            <div class="addForm">
                <div class="close" @click="bindClickClose">X</div>
                <div class="form">
                    <h4>商品类别</h4>
                    <input v-model="goodAddInfo.gtype" type="text">
                    <h4>商品名称</h4>
                    <input v-model="goodAddInfo.name" type="text">
                    <h4>风格</h4>
                    <input v-model="goodAddInfo.type" type="text">
                    <h4>规格</h4>
                    <input v-model="goodAddInfo.specifications" type="text">
                    <h4>价格</h4>
                    <input v-model="goodAddInfo.price" type="text">
                    <h4>创作时间</h4>
                    <input v-model="goodAddInfo.acttime" type="text">
                    <h4>作者</h4>
                    <input v-model="goodAddInfo.author" type="text">
                    <h4>商品图</h4>
                    <input
                        name="smallPic"
                        type="file"
                        accept="image/png, image/jpeg"
                        @change="bindChangeFile"
                    />
                    <h4>描述</h4>
                    <textarea v-model="goodAddInfo.description"
                    name="description"  cols="30" rows="10"></textarea>
                    <h4>详情图</h4>
                    <input
                        name="longPic"
                        type="file"
                        accept="image/png, image/jpeg"
                        @change="bindChangeFile"
                    />
                    <button class="submitBtn" @click="bindSubmitAddGood">
                        提交
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>


<script>
    export default{
        name:"goods",
        mounted(){
            document.title = ('画廊商城后台'+'-'+this.$options.name);
        }
    }
</script>


<script setup>
    import {ref} from 'vue';
    import {requestt,upload} from '../utils/myAxios.js';
    import useUser from '@/store/user.js';

    //状态：用户
    const userStore = useUser();
    console.log(userStore.info.bid);

    //获取与展示商品数据功能相关变量与函数
    const goodsList = ref([]);    
    requestt({
        //网络请求商品数据        
        role:"Business",
        action:"checkGoods",
        bid:userStore.info.bid
    },(res)=>{
        console.log(res.data);
        res.data.forEach(item=>item.ischeck=false);
        goodsList.value = res.data;
    });
    const goodsListHead = [
        //表头字符列表        
        '商品编号',
        '商品类型',
        '商品名称',
        '风格',
        '规格',
        '价格',
        '创作时间',
        '作者',
        '商品图',
        '描述',
        '详情图'
    ];

    //选择功能模块相关变量与函数
    var ischeckAll = false;    
    const checkAllGood = function(){
        //选择所有商品函数
        goodsList.value.forEach(item=>item.ischeck=!ischeckAll);
        ischeckAll = !ischeckAll
    }
    const selectGood = function(e){
        //选择单个商品函数
        goodsList.value.forEach(item=>{
            if(item.gid == e.currentTarget.dataset.gid){
                item.ischeck = !item.ischeck;
            }
        })
    }

    //添加功能模块相关变量与函数
    const isShowingAdd = ref(false);//显示添加面板
    const goodAddInfo = ref({
        gtype:'',
        name:'',
        type:'',
        specifications:'',
        price:'',
        acttime:'',
        author:'',
        smallPic:'',
        description:'',
        longPic:''
    })
    const bindClickAddGood = function(){
        //显示添加面板
        isShowingAdd.value = true;
    }
    const bindChangeFile = function(e){
        //当表单中的文件变动时，就会将变动的文件对象更新到
        //商品添加信息中
        goodAddInfo.value[e.target.name] = e.target.files[0];
    }
    const bindSubmitAddGood = function(){
        //网络请求添加商品数据        
        let formData = new FormData();
        formData.append('role','Business');
        formData.append('action','addGood');
        formData.append('bid',userStore.info.bid);
        for(let key in goodAddInfo.value){
            if(key == 'smallPic' || key == 'longPic'){
                formData.append('files[]',goodAddInfo.value[key]);
            }else{
                formData.append(key,goodAddInfo.value[key]);
            }
        }
        console.log("formdata:",formData);
        upload(formData,(res)=>{
            console.log(res.data);
            goodsList.value.push(res.data);
            bindClickClose();
            alert("添加成功");
        })
    }
    const bindClickClose = function(){
        //关闭添加商品面板
        isShowingAdd.value = false;
    }

    //删除功能模块相关变量与函数
    const bindClickDelGood = function(){
        //获得要删除的cid列表
        let gidList = [];
        goodsList.value.forEach(item=>{
            if(item.ischeck==true) gidList.push(item.gid);
        });
        console.log("deleting:",gidList);
        //发送删除商品网络请求
        requestt({
            role:'Business',
            action:'deleteGood',
            bid:userStore.info.bid,
            gidList:gidList.join(' ')
        },(res)=>{
            console.log(res.data);
            let newGoodsList =  goodsList.value.filter(item=>item.ischeck==false);
            console.log("newGoodsList",newGoodsList);
            goodsList.value = newGoodsList;
            alert("删除成功");
        });
    }
</script>


<style scoped lang="scss">
    @import '../style/_theme.scss';
    @import '../style/_initGlobalStyle.scss';
    .goods{
        width: 100%;
        height: 90vh;
        overflow: scroll;
        .header{
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .left{
                margin: 1vw;
                .checkAllBox{
                    display: flex;
                    cursor: pointer;
                }
            }
            .right{
                display: flex;
                margin: 1vw;
                .btn{
                    width: 3vw;
                    height: 2vw;
                    border: none;
                    color: white;
                    font-weight: bold;
                    margin-left: 1vw;
                }
                .delete{
                    border-radius: 0.5vw;
                    background-color: rgb(255, 72, 72);

                }
                .add{
                    border-radius: 0.5vw;                    
                    background-color: rgb(72, 148, 255);
                }
            }
        }
        .body{
            .goodsList{
                width: 100%;
                border-collapse: collapse;
                tr.checked{
                    background-color: $MainTableBorderColor;
                }                
                th,td{
                    width: 5vw;
                    height: 2vw;        
                    border: 1px solid rgb(240,240,240);
                    overflow: hidden;
                    text-align: center;
                    cursor: pointer;
                }
                p{
                    width: 5vw;
                    white-space:nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
                img{
                    width: 2vw;
                    height: 2vw;
                }
            }
        }
        .addPlane{
            width: 100%;
            height: 100vh;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 2;
            background-color: rgba($color: white, $alpha: 0.5);
            backdrop-filter: blur(1vw);
            display: flex;
            justify-content: center;
            align-items: center;
            .addForm{
                // width: 20vw;
                padding: 2vw;
                background-color: white;
                border-radius: 1vw;
                position: relative;
                box-shadow: 0 0 2vw 0 rgb(230, 230, 230);
                .close{
                    box-shadow: 0 0 2vw 0 rgb(230, 230, 230);
                    cursor: pointer;
                    width: 2vw;
                    height: 2vw;
                    text-align: center;
                    line-height: 2vw;
                    border-radius: 2px;
                    position: absolute;
                    right: 1vw;
                    top: 1vw;
                }
                .submitBtn{
                    padding: 0.5vw 1vw;
                    color: white;
                    background-color: rgb(72, 148, 255);
                    border: none;            
                }
            }
        }
    }
</style>